<template>
  <div
    class="booking-card bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"
  >
    <!-- 基本信息行(始终显示) -->
    <div
      class="basic-info p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-300"
      @click="isExpanded = !isExpanded"
    >
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <el-avatar :src="booking.guide.avatar" :size="48" class="mr-4" />
          <div>
            <h4 class="text-lg font-medium text-gray-900 dark:text-white">
              {{ booking.guide.name }}
            </h4>
            <p class="text-sm text-gray-500 dark:text-gray-400">
              {{ booking.guide.title }}
            </p>
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <div class="text-right">
            <div
              class="text-xl font-medium text-primary-600 dark:text-primary-400"
            >
              ¥{{ totalPrice }}
            </div>
            <p class="text-sm text-gray-500 dark:text-gray-400">
              {{ booking.days }}天 | ¥{{ booking.price }}/天
            </p>
          </div>
          <div class="flex flex-col items-end">
            <el-tag :type="getStatusType(booking.status)" class="mb-1">
              {{ getStatusText(booking.status) }}
            </el-tag>
            <el-tag :type="paymentStatusType" size="small">
              {{ paymentStatusText }}
            </el-tag>
          </div>
          <el-icon
            class="text-gray-400 transition-transform duration-300"
            :class="{ 'transform rotate-180': isExpanded }"
          >
            <ArrowDown />
          </el-icon>
        </div>
      </div>
    </div>

    <!-- 详细信息(展开时显示) -->
    <div
      v-show="isExpanded"
      class="border-t border-gray-100 dark:border-gray-700"
    >
      <div class="p-6">
        <!-- 行程信息 -->
        <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 mb-4">
          <h5 class="text-base font-medium text-gray-900 dark:text-white mb-3">
            {{ booking.route.name }}
          </h5>
          <div class="flex flex-wrap gap-2">
            <el-tag
              v-for="spot in booking.route.spots"
              :key="spot"
              size="small"
              type="info"
            >
              {{ spot }}
            </el-tag>
          </div>
        </div>

        <!-- 预约详情 -->
        <div class="grid grid-cols-2 gap-4 mb-4">
          <div class="info-item">
            <p class="text-sm text-gray-500 dark:text-gray-400">预约日期</p>
            <p class="text-gray-900 dark:text-white">{{ booking.date }}</p>
          </div>
          <div class="info-item">
            <p class="text-sm text-gray-500 dark:text-gray-400">订单编号</p>
            <p class="text-gray-900 dark:text-white">{{ booking.orderNo }}</p>
          </div>
          <div class="info-item">
            <p class="text-sm text-gray-500 dark:text-gray-400">联系电话</p>
            <p class="text-gray-900 dark:text-white">{{ booking.contact }}</p>
          </div>
          <div class="info-item">
            <p class="text-sm text-gray-500 dark:text-gray-400">创建时间</p>
            <p class="text-gray-900 dark:text-white">
              {{ booking.createTime }}
            </p>
          </div>
        </div>

        <!-- 特殊需求 -->
        <div v-if="booking.specialRequests?.length" class="mb-4">
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">特殊需求</p>
          <div class="flex flex-wrap gap-2">
            <el-tag
              v-for="request in booking.specialRequests"
              :key="request"
              size="small"
              type="warning"
            >
              {{ request }}
            </el-tag>
          </div>
        </div>

        <!-- 备注信息 -->
        <div v-if="booking.remarks" class="mb-4">
          <p class="text-sm text-gray-500 dark:text-gray-400">备注信息</p>
          <p class="text-gray-900 dark:text-white mt-1">
            {{ booking.remarks }}
          </p>
        </div>

        <!-- 行程照片 -->
        <div v-if="booking.photos?.length" class="mb-4">
          <h5 class="text-base font-medium text-gray-900 dark:text-white mb-3">
            行程照片
          </h5>
          <div class="grid grid-cols-3 gap-4">
            <div
              v-for="photo in booking.photos"
              :key="photo"
              class="relative aspect-[4/3]"
            >
              <el-image
                :src="photo"
                fit="cover"
                class="w-full h-full rounded-lg"
                :preview-src-list="booking.photos"
              />
            </div>
          </div>
        </div>

        <!-- 评价信息 -->
        <div
          v-if="booking.review"
          class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 mb-4"
        >
          <div class="flex items-center justify-between mb-2">
            <h5 class="text-base font-medium text-gray-900 dark:text-white">
              我的评价
            </h5>
            <span class="text-sm text-gray-500">{{ booking.review.date }}</span>
          </div>
          <div class="mb-2">
            <el-rate :model-value="booking.review.rating" disabled />
          </div>
          <p class="text-gray-600 dark:text-gray-400 mb-3">
            {{ booking.review.content }}
          </p>
          <div
            v-if="booking.review.photos?.length"
            class="grid grid-cols-4 gap-2"
          >
            <div
              v-for="photo in booking.review.photos"
              :key="photo"
              class="relative aspect-square"
            >
              <el-image
                :src="photo"
                fit="cover"
                class="w-full h-full rounded-lg"
                :preview-src-list="booking.review.photos"
              />
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="flex justify-end space-x-3">
          <el-button
            v-if="booking.status === 'completed' && !booking.hasReviewed"
            size="small"
            type="primary"
            @click="$emit('review', booking)"
          >
            <el-icon class="mr-1"><ChatDotRound /></el-icon>
            添加评价
          </el-button>
          <el-button
            v-if="['pending', 'confirmed'].includes(booking.status)"
            size="small"
            type="danger"
            @click="$emit('cancel', booking)"
          >
            <el-icon class="mr-1"><CircleClose /></el-icon>
            取消预约
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import {
  Clock,
  Check,
  CircleCheck,
  CircleClose,
  ChatDotRound,
  ArrowDown,
} from "@element-plus/icons-vue";

const props = defineProps({
  booking: {
    type: Object,
    required: true,
  },
});

defineEmits(["cancel", "review"]);

// 展开/收起状态
const isExpanded = ref(false);

// 计算总价
const totalPrice = computed(() => {
  return props.booking.price * props.booking.days;
});

// 状态相关计算属性
const getStatusType = (status) => {
  const types = {
    pending: "warning",
    confirmed: "success",
    completed: "info",
    cancelled: "danger",
  };
  return types[status] || "info";
};

const getStatusText = (status) => {
  const texts = {
    pending: "待确认",
    confirmed: "已确认",
    completed: "已完成",
    cancelled: "已取消",
  };
  return texts[status] || status;
};

const paymentStatusType = computed(() => {
  const types = {
    unpaid: "warning",
    paid: "success",
    refunded: "info",
  };
  return types[props.booking.paymentStatus] || "info";
});

const paymentStatusText = computed(() => {
  const texts = {
    unpaid: "待支付",
    paid: "已支付",
    refunded: "已退款",
  };
  return texts[props.booking.paymentStatus] || props.booking.paymentStatus;
});
</script>

<style lang="scss" scoped>
.booking-card {
  @apply transition-all duration-300;

  &:hover {
    @apply shadow-lg;
  }

  .basic-info {
    @apply transition-all duration-300;
  }

  .info-item {
    @apply space-y-1;
  }
}
</style>
